<template>
  <section class="login-container">
    <header class="nav-top">
      <router-link class="nav" :to="path">
        <i class="icon-arrow-left"></i>
      </router-link>
    </header>
    <main class="content">
      <header class="top">外卖</header>
      <div class="title">
        <span
          class="message-wrap"
          :class="[currentIndex === 1 ? 'active' : '']"
          @click="handleNav(1)"
          >短信登录</span
        >
        <span
          class="password"
          :class="[currentIndex === 2 ? 'active' : '']"
          @click="handleNav(2)"
          >密码登录</span
        >
      </div>
      <div v-show="currentIndex === 1">
        <form class="message-container">
          <div class="border-box">
            <input
              class="grey-color"
              v-model="phone"
              type="text"
              placeholder="手机号"
            />
            <button
              :class="{ 'p-color': getCode }"
              class="grey-color"
              @click="handleSms"
            >
              {{ codeText }}
            </button>
          </div>
          <div class="border-box">
            <input class="p-color" type="text" placeholder="验证码" />
          </div>
          <div class="text-wrap">
            <p class="grey-text">
              温馨提示:未注册硅谷外卖帐号的手机号，登录时将自动注册，且代表已同意<font
                class="green-text"
                >《用户服务协议》</font
              >
            </p>
          </div>
        </form>
      </div>
      <div v-show="currentIndex === 2">
        <form class="password-container">
          <div class="border-box">
            <input
              class="p-color"
              type="text"
              placeholder="手机号/邮箱/用户名"
            />
          </div>
          <div class="border-box">
            <input
              v-show="showPwd"
              class="p-color"
              v-model="password"
              type="text"
              placeholder="密码"
            />
            <input
              class="p-color"
              v-show="!showPwd"
              v-model="password"
              type="password"
              placeholder="密码"
            />
            <div
              class="switch-button"
              :class="showPwd ? 'on' : ''"
              @click="showPwd = !showPwd"
            >
              <span class="switch-text">{{ showPwd ? "abc" : "" }}</span>
              <span class="circle" :class="{ right: showPwd }"></span>
            </div>
          </div>
          <div class="border-box">
            <input
              class="p-color"
              type="text"
              placeholder="验证码"
              v-model="captcha"
            />
            <img
              class="svg-img"
              ref="captcha"
              src="http://localhost:4000/captcha"
              alt=""
              @click="handleGetCaptcha"
            />
            <span></span>
          </div>
        </form>
      </div>
      <div class="form-bottom">
        <button class="green-btn" @click="handleLogin">登录</button>
        <button class="grey-btn">关于我们</button>
      </div>
    </main>
    <AlertTip
      v-show="isShowAlert"
      :title="alertText"
      @handleConfirm="handleConfirm"
    />
  </section>
</template>

<script>
import AlertTip from '../../components/AlertTip'
import {
  getSendCode,
  getSms,
  getLoginPwd
} from '../../api/index.js'
export default {
  name: 'Login',
  components: {
    AlertTip
  },
  data () {
    return {
      path: '',
      codeText: '获取验证码', // 验证码
      showPwd: false, // 密码查看
      currentIndex: 1, // 当前导航
      isShowAlert: false, // 查看弹框
      alertText: '', // 弹框文字
      // 1
      phone: '13716962779', // 手机号码
      code: '', // 获取短信验证码
      // 2
      name: '', // 用户名
      password: '', // 密码
      captcha: '', // 验证码
      // 定时器
      times: 60,
      timer: null
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.path = from.path
    })
  },
  computed: {
    getCode () {
      return /^1\d{10}/.test(this.phone)
    }
  },
  methods: {
    handleGetCaptcha () {
      this.$refs.captcha.src = 'http://localhost:4000/captcha' + Date.now()
    },
    handleNav (index) {
      this.currentIndex = index
    },
    async handleLogin () { // 登录
      if (this.currentIndex === 1) { // 手机登录
        const { phone, code } = this
        const res = await getSms(phone, code)
        this._dealRes(res)
      } else { // 密码登录
        const { code, password, captcha } = this
        const res = await getLoginPwd({ code, password, captcha })
        this._dealRes(res)
      }
    },
    _dealRes (res) {
      if (res.code === 0) {
        let user = res.data
        this.$store.dispatch('recordUserInfo', user)
      }
      this.$router.push('/my')
    },
    handleConfirm () { // 确定登录

    },
    async handleSms () { // 获取短信验证
      if (/^1\d{10}/.test(this.phone)) {
        if (this.times) {
          this.timer = setInterval(() => {
            this.times--
            this.codeText = `已发送${this.times}s`
            if (this.times <= 0) {
              clearInterval(this.timer)
              this.codeText = '获取验证码'
            }
          }, 1000)
          const { phone } = this
          const res = await getSendCode(phone)
          if (res.code === 0) {
            clearInterval(this.timer)
            this.codeText = '获取验证码'
          } else {
          }
        }
      }
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../assets/common/stylus/mixins.styl'
.login-container
  width 100%
  height 100%
  position relative
  .nav-top
    padding-top 80px
    height 60px
    line-height 60px
    padding 0 10px
    color #333
    margin-bottom 10px
    .nav
      color #333
  .content
    display flex
    width 100%
    padding 40px
    box-sizing border-box
    justify-content center
    align-content center
    flex-direction column
    text-align center
    .top
      color $green
      font-size 48px
      padding 20px 0
    .title
      display flex
      align-items center
      justify-content space-around
      .message-wrap, .password
        font-size 20px
        padding-bottom 3px
        &.active
          color $green
          font-weight 600
          font-size 20px
          padding-bottom 3px
          border-bottom 4px solid $green
    .message-container
      width 100%
      .border-box
        border-1px($bc)
        margin 10px 0
        background-color #fff
        border-radius-1px(5px)
        border-1px(#aaa)
        display flex
        justify-content space-between
        padding 10px
        .grey-color
          color #aaa
          height 30px
          line-height 30px
          background transparent
          border none
        .p-color
          color #000
          height 30px
          line-height 30px
          font-size 16px
          &::placeholder
            font-size 20px
          .focus-form
            border-1px($green)
      .text-wrap
        color #aaa
        text-align left
        line-height 25px
        padding 10px 0
        .grey-text
          color #aaa
          font-size 16px
        .green-text
          color $green
          display inline
    .password-container
      width 100%
      .border-box
        border-1px($bc)
        margin 10px 0
        background-color #fff
        border-radius-1px(5px)
        border-1px(#aaa)
        display flex
        justify-content space-between
        padding 10px
        .p-color
          width 100%
          height 30px
          line-height 30px
          font-size 16px
          &::placeholder
            font-size 20px
        .switch-button
          width 100px
          height 30px
          line-height 30px
          border-radius-1px(20px)
          border-1px(#aaa)
          background-color #fff
          display flex
          .circle
            width 28px
            height 28px
            line-height 30px
            display block
            background-color #fff
            border-radius-1px(50%)
            border-1px(#aaa)
          .switch-text
            color #fff
            transition transform 0.3s
            width calc(100% - 28px)
          &.on
            background-color $green
        .svg-img
          height 30px
          .text-wrap
            color #aaa
            text-align left
            line-height 25px
            padding 10px 0
            .grey-text
              color #aaa
              font-size 15px
            .green-text
              color $green
              display inline
    .form-bottom
      width 100%
      .green-btn
        width 100%
        display block
        background-color $green
        border none
        padding 10px
        border-radius-1px(5px)
        color #fff
        font-size 18px
      .grey-btn
        width 100%
        display block
        background-color transparent
        border none
        padding 10px
        border-radius-1px(5px)
        color #aaa
        font-size 18px
</style>
